<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>今日新闻网后台模块</title>
    <!-- 引入我们的重置样式 -->
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/user.css">
</head>
<body>
    <!-- 头部 -->
    <header id="header-top">
        <!-- 页眉区域 -->
        <div id="top-box">
            <div class="top-left">
                <ul>
                    <li><a href="">推荐</a></li>
                    <li><a href="">热点</a></li>
                    <li><a href="">视频</a></li>
                    <li><a href="">图片</a></li>
                    <li><a href="">娱乐</a></li>
                </ul>
            </div>
            <div class="top-right">
                <ul>
                    <li><a href="">发文</a></li>
                    <li><a href="">登陆</a></li>
                    <li><a href="">注册</a></li>
                    <li><a href="">反馈</a></li>
                    <li><a href="">侵权投诉</a></li>
                </ul>
            </div>
        </div>
        <!-- 搜索区域 -->
        <div class="header-nav">
            <div class="middle">
                <img src="./img/logo.png" class="header--logo" alt="">
                <!-- 搜索框 -->
                <div class="header-search">
                    <input type="text" name="search" placeholder="请输入需要搜索的资讯或昵称" id="search">
                    <input type="submit" id="search--btn" value="搜索">
                </div>
            </div>
        </div>
    </header>

    <!-- 内容主体区 -->
    <section id="content">
       <div class="article-box">
           <h3>发表新闻</h3>
            <div class="article-title">
               <p>标题：<input type="text" class="title-input" name="title" id="" placeholder="请输入文章标题"></p> 
               <p>
                   分类：
                   <select name="category" id="" class="select-input">
                       <option value="1">热点</option>
                       <option value="1">娱乐</option>
                       <option value="1">游戏</option>
                   </select>
               </p>
               <!-- 新闻富文本编辑器 -->
               <div class="article-content">
                     <!-- 加载编辑器的容器 -->
                    <script id="container" name="content" type="text/plain"></script>
                    <!-- 配置文件 -->
                    <script type="text/javascript" src="./ueditor/ueditor.config.js"></script>
                    <!-- 编辑器源码文件 -->
                    <script type="text/javascript" src="./ueditor/ueditor.all.js"></script>
                    <!-- 实例化编辑器 -->
                    <script type="text/javascript">
                        var ue = UE.getEditor('container',{
                            //默认的编辑区域高度
                            initialFrameHeight:300
                        });
                    </script>
               </div>
               <div class="article-pic">
                   封面展示：
                   <input type="radio" name="pic" value="1" checked id="">单图
                   <input type="radio" name="pic" value="2" id="">无封面
               </div>
               <!-- 点击图片上传的框 -->
               <div class="pic-detail">
                    +
               </div>
               <p class="pic-intro">优质的封面有利于推荐，格式支持JPEG、PNG</p>
               <input type="button" class="send--btn" value="存为草稿">
               <input type="button" class="send--btn send--active" value="发布">
            </div>
       </div>
    </section>

    <!-- 底部内容区 -->
    <footer id="footer">
        <p>© 2021 今日新闻 中国互联网举报中心京ICP证140141号京ICP备12025439号-3京公网安备 11000002002023号</p>
        <p>
            <a href="#">网络文化经营许可证</a>   
            <a href="#">跟帖评论自律管理承诺书</a>
            <a href="#">违法和不良信息举报电话：</a>400-140-2108
            公司名称：鲸否教育科技有限公司
        </p>
    </footer>
    <script src="./js/jquery-3.3.1.min.js"></script>
    <script>
        $("input[type='radio']").click(function(){
            var val = $(this).val();
            if(val == 1)
            {
                $(".pic-detail").show();
                $(".pic-intro").show();
            }
            else
            {
                $(".pic-detail").hide();
                $(".pic-intro").hide(); 
            }
        });
    </script>
</body>
</html>